<template>
  <el-drawer :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
    :destroy-on-close="false" :modal="true" direction="rtl" :wrapperClosable="false" custom-class="form-drawer"
    size="450px" @closed="closed">

    <div class="form-drawer__content">
      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 5px;">
        <el-form-item>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="图标显示" prop="showIcon">
              <el-select v-model="formData.showIcon" placeholder="请选择" style="width: 100%;">
                <el-option label="显示" value="true"></el-option>
                <el-option label="隐藏" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="外层空间" prop="space">
              <el-input-number size="mini" v-model="formData.space" :min="0" :max="100" label="外层空间(space)"
                style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="网格显示" prop="showMesh">
              <el-select v-model="formData.showMesh" placeholder="请选择" style="width: 100%;">
                <el-option label="隐藏" value="false"></el-option>
                <el-option label="显示" value="true"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="显示范围" prop="showRange">
              <el-input v-model="formData.showRange" placeholder="显示范围(4000,10000)" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="默认图标" prop="imageUrlNormal" style="margin-bottom: 0px;">
              <el-upload class="avatar-uploader" action="" ref="upload1" :auto-upload="false" :show-file-list="false"
                :on-change="handleChangeNormal">
                <img v-if="imageUrlNormal" :src="imageUrlNormal" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="默认图标尺寸" prop="markerNormalSize">
              <el-input v-model="formData.markerNormalSize" placeholder="默认图标尺寸(59,67)" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="选中图标" prop="imageUrlActivate" style="margin-bottom: 0px;">
              <el-upload class="avatar-uploader" action="" ref="upload2" :auto-upload="false" :show-file-list="false"
                :on-change="handleChangeActivate">
                <img v-if="imageUrlActivate" :src="imageUrlActivate" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="选中图标尺寸" prop="markerActivateSize">
              <el-input v-model="formData.markerActivateSize" placeholder="选中图标尺寸(59,67)" autocomplete="off" />
            </el-form-item>
          </el-col>

        </el-form-item>
        <el-divider></el-divider>
        <div class="des_title">默认标签</div>
        <el-form-item>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="标签文本" prop="labelNormalText">
              <el-input v-model="formData.labelNormalText" placeholder="标签文本" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体样式" prop="labelNormalFontStyle">
              <el-input v-model="formData.labelNormalFontStyle" placeholder="字体样式(Bold)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体大小" prop="labelNormalFontSize">
              <el-input-number size="mini" v-model="formData.labelNormalFontSize" :min="0" :max="100" label="字体大小" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体颜色" prop="labelNormalFontColor">
              <el-color-picker v-model="formData.labelNormalFontColor" show-alpha size="mini"></el-color-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="偏移" prop="labelNormalOffset">
              <el-input v-model="formData.labelNormalOffset" placeholder="偏移(0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="阴影偏移" prop="labelNormalFontShadowOffset">
              <el-input v-model="formData.labelNormalFontShadowOffset" placeholder="阴影偏移(0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="背景颜色" prop="labelNormalBgColor">
              <el-color-picker v-model="formData.labelNormalBgColor" show-alpha size="mini"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="标签显示" prop="labelNormalShowLabel">
              <el-select v-model="formData.labelNormalShowLabel" placeholder="请选择" style="width: 100%;">
                <el-option label="显示" value="true"></el-option>
                <el-option label="隐藏" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体系列" prop="labelNormalFontFamily">
              <el-input v-model="formData.labelNormalFontFamily" placeholder="字体系列(Roboto)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="边框大小" prop="labelNormalFontOutlineSize">
              <el-input-number size="mini" v-model="formData.labelNormalFontOutlineSize" :min="0" :max="100"
                label="边框大小" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="边框颜色" prop="labelNormalFontOutlineColor">
              <el-color-picker v-model="formData.labelNormalFontOutlineColor" show-alpha size="mini"></el-color-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="内边距" prop="labelNormalPadding">
              <el-input v-model="formData.labelNormalPadding" placeholder="内边距(0,0,0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="阴影颜色" prop="labelNormalFontShadowColorAndOpacity">
              <el-color-picker v-model="formData.labelNormalFontShadowColorAndOpacity" show-alpha size="mini">
              </el-color-picker>
            </el-form-item>
            <el-form-item>
              <el-button class="mini-info-button" size="mini" type="warning" @click="handleFill()">一键填充</el-button>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-divider></el-divider>
        <div class="des_title">选中标签</div>
        <el-form-item>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="标签文本" prop="labelActivateText">
              <el-input v-model="formData.labelActivateText" placeholder="标签文本" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体样式" prop="labelActivatFontStyle">
              <el-input v-model="formData.labelActivatFontStyle" placeholder="字体样式(Bold)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体大小" prop="labelActivateFontSize">
              <el-input-number size="mini" v-model="formData.labelActivateFontSize" :min="0" :max="100" label="字体大小" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体颜色" prop="labelActivateFontColor">
              <el-color-picker v-model="formData.labelActivateFontColor" show-alpha size="mini"></el-color-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="偏移" prop="labelActivateOffset">
              <el-input v-model="formData.labelActivateOffset" placeholder="偏移(0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="阴影偏移" prop="labelActivateFontShadowOffset">
              <el-input v-model="formData.labelActivateFontShadowOffset" placeholder="阴影偏移(0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="背景颜色" prop="labelActivateBgColor">
              <el-color-picker v-model="formData.labelActivateBgColor" show-alpha size="mini"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="标签显示" prop="labelActivateShowLabel">
              <el-select v-model="formData.labelActivateShowLabel" placeholder="请选择" style="width: 100%;">
                <el-option label="显示" value="true"></el-option>
                <el-option label="隐藏" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="字体系列" prop="labelActivateFontFamily">
              <el-input v-model="formData.labelActivateFontFamily" placeholder="字体系列(Roboto)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="边框大小" prop="labelActivateFontOutlineSize">
              <el-input-number size="mini" v-model="formData.labelActivateFontOutlineSize" :min="0" :max="100"
                label="边框大小" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="边框颜色" prop="labelActivateFontOutlineColor">
              <el-color-picker v-model="formData.labelActivateFontOutlineColor" show-alpha size="mini">
              </el-color-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="内边距" prop="labelActivatePadding">
              <el-input v-model="formData.labelActivatePadding" placeholder="内边距(0,0,0,0)" autocomplete="off" />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="阴影颜色" prop="labelActivateFontShadowColorAndOpacity">
              <el-color-picker v-model="formData.labelActivateFontShadowColorAndOpacity" show-alpha size="mini">
              </el-color-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>

    </div>

  </el-drawer>
</template>

<script>
  import {
    savePoiStyle
  } from '@/api/subsystem/poiTemplate'
  export default {
    name: 'StyleDialog',
    components: {},
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {},
    watch: {
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.projectId = value.data.projectId || this.$store.getters.projectId
            this.formData.showIcon = value.data.showIcon || 'true'
            this.formData.showMesh = value.data.showMesh || 'false'
            this.formData.showRange = value.data.showRange || '4000,10000'
            this.formData.space = value.data.space || 0
            this.formData.markerNormalUrl = value.data.markerNormalUrl || ''
            this.formData.markerNormalSize = value.data.markerNormalSize || ''
            this.formData.markerActivateUrl = value.data.markerActivateUrl || ''
            this.formData.markerActivateSize = value.data.markerActivateSize || ''
            this.formData.labelNormalText = value.data.labelNormalText || ''
            this.formData.labelNormalFontSize = value.data.labelNormalFontSize || 64
            this.formData.labelNormalFontStyle = value.data.labelNormalFontStyle || 'Bold'
            this.formData.labelNormalFontFamily = value.data.labelNormalFontFamily || 'Roboto'
            this.formData.labelNormalFontColor = value.data.labelNormalFontColor || 'rgba(0,0,0,1)'
            this.formData.labelNormalFontOutlineSize = value.data.labelNormalFontOutlineSize || 1
            this.formData.labelNormalFontOutlineColor = value.data.labelNormalFontOutlineColor || 'rgba(0,0,0,1)'
            this.formData.labelNormalFontShadowOffset = value.data.labelNormalFontShadowOffset || '0,0'
            this.formData.labelNormalFontShadowColorAndOpacity = value.data.labelNormalFontShadowColorAndOpacity ||
              'rgba(0,0,0,1)'
            this.formData.labelNormalShowLabel = value.data.labelNormalShowLabel || 'true'
            this.formData.labelNormalOffset = value.data.labelNormalOffset || '0,0'
            this.formData.labelNormalPadding = value.data.labelNormalPadding || '0,0,0,0'
            this.formData.labelNormalBgColor = value.data.labelNormalBgColor || 'rgba(0,0,0,1)'
            this.formData.labelActivateText = value.data.labelActivateText || ''
            this.formData.labelActivateFontSize = value.data.labelActivateFontSize || 64
            this.formData.labelActivatFontStyle = value.data.labelActivatFontStyle || 'Bold'
            this.formData.labelActivateFontFamily = value.data.labelActivateFontFamily || 'Roboto'
            this.formData.labelActivateFontColor = value.data.labelActivateFontColor || 'rgba(0,0,0,1)'
            this.formData.labelActivateFontOutlineSize = value.data.labelActivateFontOutlineSize || 1
            this.formData.labelActivateFontOutlineColor = value.data.labelActivateFontOutlineColor || 'rgba(0,0,0,1)'
            this.formData.labelActivateFontShadowOffset = value.data.labelActivateFontShadowOffset || '00'
            this.formData.labelActivateFontShadowColorAndOpacity = value.data.labelActivateFontShadowColorAndOpacity ||
              'rgba(0,0,0,1)'
            this.formData.labelActivateShowLabel = value.data.labelActivateShowLabel || 'true'
            this.formData.labelActivateOffset = value.data.labelActivateOffset || '0,0'
            this.formData.labelActivatePadding = value.data.labelActivatePadding || '0,0,0,0'
            this.formData.labelActivateBgColor = value.data.labelActivateBgColor || 'rgba(0,0,0,1)'

            if(value.data.id){
              this.imageUrlNormal=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id+'_normal'
              this.imageUrlActivate=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id+'_activate'
            }

          } else {
            this.formData.id = ''
            this.formData.projectId = this.$store.getters.projectId
            this.formData.showIcon = 'true'
            this.formData.showMesh = 'false'
            this.formData.showRange = '4000,10000'
            this.formData.space = 0
            this.formData.markerNormalUrl = ''
            this.formData.markerNormalSize = ''
            this.formData.markerActivateUrl = ''
            this.formData.markerActivateSize = ''
            this.formData.labelNormalText = ''
            this.formData.labelNormalFontSize = 64
            this.formData.labelNormalFontStyle = 'Bold'
            this.formData.labelNormalFontFamily = 'Roboto'
            this.formData.labelNormalFontColor = 'rgba(0,0,0,1)'
            this.formData.labelNormalFontOutlineSize = 1
            this.formData.labelNormalFontOutlineColor = 'rgba(0,0,0,1)'
            this.formData.labelNormalFontShadowOffset = '0,0'
            this.formData.labelNormalFontShadowColorAndOpacity = 'rgba(0,0,0,1)'
            this.formData.labelNormalShowLabel = 'true'
            this.formData.labelNormalOffset = '0,0'
            this.formData.labelNormalPadding = '0,0,0,0'
            this.formData.labelNormalBgColor = 'rgba(0,0,0,1)'
            this.formData.labelActivateText = ''
            this.formData.labelActivateFontSize = 64
            this.formData.labelActivatFontStyle = 'Bold'
            this.formData.labelActivateFontFamily = 'Roboto'
            this.formData.labelActivateFontColor = 'rgba(0,0,0,1)'
            this.formData.labelActivateFontOutlineSize = 1
            this.formData.labelActivateFontOutlineColor = 'rgba(0,0,0,1)'
            this.formData.labelActivateFontShadowOffset = '0,0'
            this.formData.labelActivateFontShadowColorAndOpacity = 'rgba(0,0,0,1)'
            this.formData.labelActivateShowLabel = 'true'
            this.formData.labelActivateOffset = '0,0'
            this.formData.labelActivatePadding = '0,0,0,0'
            this.formData.labelActivateBgColor = 'rgba(0,0,0,1)'
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '添加POI模板'
            }
            if (value.type === '1') {
              this.title = '编辑POI模板'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '样式编辑',
        loading: false,
        imageUrlNormal: '',
        imageUrlActivate: '',
        formData: {
          id: '',
          projectId: this.$store.getters.projectId,
          showIcon: 'true',
          showMesh: 'false',
          showRange: '4000,10000',
          space: 0,
          markerNormalUrl: '',
          markerNormalSize: '',
          markerActivateUrl: '',
          markerActivateSize: '',
          labelNormalText: '',
          labelNormalFontSize: 64,
          labelNormalFontStyle: 'Bold',
          labelNormalFontFamily: 'Roboto',
          labelNormalFontColor: 'rgba(0,0,0,1)',
          labelNormalFontOutlineSize: 1,
          labelNormalFontOutlineColor: 'rgba(0,0,0,1)',
          labelNormalFontShadowOffset: '0,0',
          labelNormalFontShadowColorAndOpacity: 'rgba(0,0,0,1)',
          labelNormalShowLabel: 'true',
          labelNormalOffset: '0,0',
          labelNormalPadding: '0,0,0,0',
          labelNormalBgColor: 'rgba(0,0,0,1)',
          labelActivateText: '',
          labelActivateFontSize: 64,
          labelActivatFontStyle: 'Bold',
          labelActivateFontFamily: 'Roboto',
          labelActivateFontColor: 'rgba(0,0,0,1)',
          labelActivateFontOutlineSize: 1,
          labelActivateFontOutlineColor: 'rgba(0,0,0,1)',
          labelActivateFontShadowOffset: '0,0',
          labelActivateFontShadowColorAndOpacity: 'rgba(0,0,0,1)',
          labelActivateShowLabel: 'true',
          labelActivateOffset: '0,0',
          labelActivatePadding: '0,0,0,0',
          labelActivateBgColor: 'rgba(0,0,0,1)',
        },
        formLabelWidth: '100px',
        isSyn: true,
        options: [],
        items: [],
        rules: {
          /* name: [{
              required: true,
              message: '请输名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ], */
        }
      }
    },
    created() {},
    methods: {
      handleFill: function() {
        this.formData.labelActivateText = this.formData.labelNormalText
        this.formData.labelActivateFontSize = this.formData.labelNormalFontSize
        this.formData.labelActivatFontStyle = this.formData.labelNormalFontStyle
        this.formData.labelActivateFontFamily = this.formData.labelNormalFontFamily
        this.formData.labelActivateFontColor = this.formData.labelNormalFontColor
        this.formData.labelActivateFontOutlineSize = this.formData.labelNormalFontOutlineSize
        this.formData.labelActivateFontOutlineColor = this.formData.labelNormalFontOutlineColor
        this.formData.labelActivateFontShadowOffset = this.formData.labelNormalFontShadowOffset
        this.formData.labelActivateFontShadowColorAndOpacity = this.formData.labelNormalFontShadowColorAndOpacity
        this.formData.labelActivateShowLabel = this.formData.labelNormalShowLabel
        this.formData.labelActivateOffset = this.formData.labelNormalOffset
        this.formData.labelActivatePadding = this.formData.labelNormalPadding
        this.formData.labelActivateBgColor = this.formData.labelNormalBgColor
      },
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            savePoiStyle(this.formData).then(rsp => {
                if (200 == rsp.code) {
                  this.$message({
                    type: 'success',
                    message: rsp.message
                  })
                }
                this.closed()
              }).catch(err => {
                console.log(err);
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      handleChangeNormal(file, fileList) {
        this.formData.file1=file.raw;
        this.imageUrlNormal = URL.createObjectURL(file.raw);
      },
      handleChangeActivate(file, fileList) {
        this.formData.file2=file.raw;
        this.imageUrlActivate = URL.createObjectURL(file.raw);
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }
</script>


<style scoped>
  /deep/.el-drawer__header {
    margin-bottom: 0px;
  }

  /deep/.form-drawer {
    width: 500px !important;
  }

  /deep/.des_title {
    font-size: 14px;
    font-weight: 700;
    color: #303133;
    margin-bottom: 10px;
  }

  /deep/.el-divider--horizontal {
    margin: 5px 0;
    height: 0.5px;
  }

  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
    border-radius: 10px;
  }

  /deep/.avatar {
    width: 100px !important;
    height: 80px !important;
    display: block;
    border-radius: 10px;
  }

  /deep/.el-form-item {
    margin-bottom: 10px;
  }

  /deep/.el-input--medium {
    font-size: 12px;
  }

  /deep/.el-input--medium .el-input__inner {
    height: 20px;
    line-height: 20px;
  }

  /deep/.el-form-item--medium .el-form-item__content {
    line-height: 20px;
    /* height: 20px; */
  }

  /deep/.el-form-item--medium .el-form-item__label {
    line-height: 20px;
  }

  /deep/.el-form-item__label {
    font-size: 12px;
    text-align: right;
  }

  /deep/.el-form-item__error {
    padding-top: 0px;
  }

  /deep/.el-input--medium .el-input__icon {
    line-height: 20px;
  }

  /deep/.el-select-dropdown__item {
    font-size: 12px !important;
    height: 20px !important;
    line-height: 20px !important;
  }

  /deep/.el-input--mini .el-input__inner {
    height: 20px;
    line-height: 20px;
  }

  .el-input-number--mini {
    line-height: 18px;
  }

  /deep/.el-color-picker--mini {
    height: 20px !important;
  }

  /deep/.el-color-picker--mini .el-color-picker__trigger {
    height: 20px !important;
    width: 32px !important;
  }

  /deep/.el-color-picker__trigger {
    padding: 2px;
  }

  .mini-info-button {
    float: right;
  }
</style>
